<template>
  <div class="list_container">
    <div v-for="(item,index) in scrollList" :key="index" class="item_container" @click="onScrollItemClick(item,index)">
      <component :is="currentComponent" :sole-item="item" :active-item="index===activeIndex" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseVScroll',
  props: {
    currentComponent: {
      type: Object,
      default: () => {}
    },
    scrollList: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      activeIndex: 0
    }
  },

  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },

  methods: {
    /**
         * [handleScroll description]滚动到底部
         *
         * @param   {[type]}  e  [e description]
         *
         * @return  {[type]}     [return description]
         */
    handleScroll(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        // 在此处放入你的加载更多方法
        // this.initData()
        this.$emit('onLoaMoredData')
      }
    },
    onScrollItemClick(data, index) {
      this.activeIndex = index
      this.$emit('onScrollItemClick', data)
    }

  }
}
</script>

<style lang="scss" scoped>
.list_container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.item_container {

}
</style>
